import React, { Component } from 'react';
import { withRouter, Link, Switch, Route } from 'react-router-dom'

import { Tabs, Tag, DatePicker } from 'antd';
import echarts from 'echarts'

import "../../static/index/index.less"
import $ from 'jquery'
import u from '../../common.js'
import { Spin } from 'antd';
// import { cursorTo } from 'readline';

const TabPane = Tabs.TabPane;
const CheckableTag = Tag.CheckableTag;
const tagsFromServer = ['今日', '本周', '历时四周'];
const { RangePicker } = DatePicker;


class Index extends React.Component {
  state = {
    loading: false,
    where: 'jinNei',
    hours: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
    arrayList: [
      { url: require('../../static/image/icon_new.png'), title: '新闻' },
      { url: require('../../static/image/lun.png'), title: '论坛' },
      { url: require('../../static/image/meu.png'), title: '平面媒体' },
      { url: require('../../static/image/bo.png'), title: '博客' },
      { url: require('../../static/image/icon_tieba.png'), title: '贴吧' },
      { url: require('../../static/image/hot.png'), title: '热点新闻' },
      { url: require('../../static/image/wai.png'), title: '外文网站' },
      { url: require('../../static/image/dui.png'), title: '公众号', count: 0 },
      { url: require('../../static/image/weixin.png'), title: '微信群', count: 0 },
      { url: require('../../static/image/peng.png'), title: '朋友圈', count: 0 },
      { url: require('../../static/image/jing.png'), title: '境外', count: 0 },
    ],
    innerDate: [],
    count: null,
    selectedTags: [],
    timeArray: [],
    id1: '',
    id2: '',
    title1: '',
    title2: '',
    riqi: null,
    titleList: [],
    keyGroupList: [],
    timeStr: null,
    list1: [],
    list2: [],
    instant: '',//即时通讯
    tieba: '',//贴吧
    news: '',//新闻
    searchEngine: '',//搜索引擎
    socialNet: '',//社交网络
    zangwen: '',//藏文
    App: '',//app
    yuJingList: [],
    zhouList: [],
    changeTime: '',
    yujingflag: true
  };
  handleChange(tag, checked) {

    const { selectedTags } = this.state;
    console.log(selectedTags)
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter(t => t == tag);
    this.setState({ selectedTags: nextSelectedTags });
  }
  onChange(value, dateString) {

  }

  onOk(value) {
  }
  analysis = async () => {
    let mediaTrend = echarts.init(window.document.getElementById('trend'));
    window.onresize = function () {
      mediaTrend.resize();
    }
  };
  trend = async () => {
    var date = new Date()
    var week = new Date().getDay()
    var year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    let newTime = year + '-' + month + '-' + day + ' ' + '00:00:00'
    let timeList = []

    var dayList = []
    for (var i = 0; i < this.state.hours.length; i++) {
      if (this.state.hours[i] < 10) {
        let dayTime = '' + year + '-' + month + '-' + day + ' 0' + this.state.hours[i] + ':00:00'
        // alert((new Date(dayTime)).getTime())
        dayList.push((new Date(dayTime)).getTime())
      } else {
        let dayTime = '' + year + '-' + month + '-' + day + ' ' + this.state.hours[i] + ':00:00'
        dayList.push((new Date(dayTime)).getTime())
      }
    }
    var timeStr = ''
    for (var i = 0; i < dayList.length - 1; i++) {
      timeStr = timeStr + dayList[i] + '-' + dayList[i + 1] + ','
    }
    timeStr = timeStr.substring(0, timeStr.length - 1)
    u.dataStatistics({
      aggsField: 'addTime',
      aggsType: 'range',
      ranges: timeStr,
      isNeedUserKey: true,
    }, data => {
      let timeArray = []
      for (var i = 0; i < data.aggs.length; i++) {
        timeArray.push(data.aggs[i].count)
      }
      var sum = 0
      for (var i = 0; i < timeArray.length; i++) {
        sum = sum + timeArray[i]
      }
      this.setState({
        count: sum
      })


      let mediaTrend = echarts.init(window.document.getElementById('trend'));
      mediaTrend.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '0',
          right: '10%',
          top: '3%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [
          {

            type: 'category',
            interval: 10,
            data: ['2点', '4点', '6点', '8点', '10点', '12点', '14点', '16点', '18点', '20点', '22点', '24点'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#a1a5b5"
            },
            axisLine: {
              lineStyle: {
                color: "#a1a5b5"
              }
            },

          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 4,
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#a1a5b5"
            },
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
              }
            }

          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#566afe' },
                    { offset: 1, color: '#518bff' }
                  ]
                )
              },
            },
            barWidth: '30%',
            barCategoryGap: '10px',
            data: timeArray
          }
        ]
      });
    })
  };
  componentWillMount() {
  }
  componentDidMount() {
    $('.at-select .ant-tag-checkable:nth-child(1)').addClass('ant-tag-checkable-checked')
    var date = new Date()
    var week = new Date().getDay()
    var year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    let newTime = year + '-' + month + '-' + day + ' ' + '00:00:00'
    let timeList = []

    let startTime = year + '-' + month + '-' + day + ' ' + '00:00:00'
    let timeEnd = new Date(Date.parse(startTime) + 86400 * 1000)
    var y = timeEnd.getFullYear();
    var m = timeEnd.getMonth() + 1;
    var d = timeEnd.getDate();
    let endTime = u.getDate(0, true)

    u.shouYe({ page: 1 }, data => {
      this.setState({
        list1: data.data
      })
    })
    // 查询预警信息
    this.onSimple()
    //数据统计接口
    u.dataStatistics({
      startTime: startTime,
      endTime: endTime,
      aggsType: "terms",
      isNeedUserKey: true,
      aggsField: "webSiteType",
      aggsSize: 20,
      size: 0
    }, data => {
      if (!data || !data.aggs) return;
      let list = data.aggs
      var count = 0
      let arr = this.state.arrayList
      arr.forEach((el, index) => {
        // console.log(el,index,list.length)
        // if(index>=list.length-1){
        //   el.count = list[list.length-1].count;
        //   el.key = list[list.length-1].key
        //   return 
        // }
        if (index <= 6) {
          el.count = list[index].count;
          el.key = list[index].key
        }

      })
      this.setState({
        arrayList: arr
      }, () => {
        u.wangZhanNum({
          startTime: startTime,
          endTime: endTime,
          webSiteType: 14
        }, data => {
          let list = this.state.arrayList
          list[7].count = data.KeyWordTodayTotal.AboroadTodayTotal
          list[8].count = data.KeyWordTodayTotal.GroupTodayTotal
          list[9].count = data.KeyWordTodayTotal.FriendTodayTotal
          list[10].count = data.KeyWordTodayTotal.PublicTodayTotal
          list[7].toadycount = data.TodayTotal.AboroadTodayTotal
          list[8].toadycount = data.TodayTotal.GroupTodayTotal
          list[9].toadycount = data.TodayTotal.FriendTodayTotal
          list[10].toadycount = data.TodayTotal.PublicTodayTotal
          this.setState({
            arrayList: list
          }, () => {
            u.dataStatistics({
              startTime: startTime,
              endTime: endTime,
              "aggsType": "terms",
              "isNeedUserKey": false,
              "aggsField": "webSiteType",
              "aggsSize": 20,
              "size": 0
            }, data => {
              if (!data || !data.aggs) return;
              let list = data.aggs
              var count = 0
              let arr = this.state.arrayList
              arr.forEach((el, index) => {
                // console.log(el,index,list.length)
                // if(index>=list.length-1){
                //   el.count = list[list.length-1].count;
                //   el.key = list[list.length-1].key
                //   return 
                // }
                if (index <= 6) {
                  el.toadycount = list[index].count;
                  // el.key = list[index].key
                }

              })
            })
          })
        })
      })
    })


    var dayList = []
    for (var i = 0; i < this.state.hours.length; i++) {
      if (this.state.hours[i] < 10) {
        let dayTime = '' + year + '-' + month + '-' + day + ' 0' + this.state.hours[i] + ':00:00'
        dayList.push((new Date(dayTime)).getTime())
      } else {
        let dayTime = '' + year + '-' + month + '-' + day + ' ' + this.state.hours[i] + ':00:00'
        dayList.push((new Date(dayTime)).getTime())
      }
    }
    var timeStr = ''
    for (var i = 0; i < dayList.length - 1; i++) {
      timeStr = timeStr + dayList[i] + '-' + dayList[i + 1] + ','
    }
    timeStr = timeStr.substring(0, timeStr.length - 1)

    u.instragramTime({
      aggsField: 'poHour',
      aggsType: 'range',
      ranges: timeStr
    }, data => {

      let timeArray = []
      for (var i = 0; i < data.data.length; i++) {
        timeArray.push(data.data[i].count)
      }
      this.setState({
        timeArray: timeArray
      })
    })

    for (var i = 0; i < week; i++) {
      let time = new Date(Date.parse(newTime) - 86400 * i * 1000)
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      let week = '' + y + '-' + m + '-' + d + ' 00:00:00'

      timeList.push((new Date(week)).getTime())
    }
    if (7 - week > 0) {
      for (var j = 1; j <= (7 - week); j++) {

        let time = new Date(Date.parse(newTime) + 86400 * j * 1000)
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        let week = '' + y + '-' + m + '-' + d + ' 00:00:00'

        timeList.push((new Date(week)).getTime())
      }
    }
    let timeArray = timeList.sort()
    var str = ''
    for (var i = 0; i < timeArray.length - 1; i++) {
      str = str + timeArray[i] + '-' + timeArray[i + 1] + ','
    }
    let dayStr = str.substring(0, str.length - 1)

    let weeKList = []
    var count = 0
    for (var j = 0; j < 8; j++) {
      if (j === 0) {
        count = 0
        onWeek(count)
      }
      if (j != 0 && j % 2 === 0) {
        count = count + 1
        onWeek(count)
      }
      if (j != 0 && j % 2 !== 0) {
        count = count + 6
        onWeek(count)
      }
    }
    function onWeek(count) {
      let timeWeek = new Date(Date.parse(newTime) - 86400 * (week + count) * 1000)
      var y2 = timeWeek.getFullYear();
      var m2 = (timeWeek.getMonth() + 1) <= 9 ? '0' + (timeWeek.getMonth() + 1) : timeWeek.getMonth() + 1
      var d2 = timeWeek.getDate() <= 9 ? '0' + timeWeek.getDate() : timeWeek.getDate()
      let weekDay = '' + y2 + '-' + m2 + '-' + d2 + ' 00:00:00'
      weeKList.push((new Date(weekDay)).getTime())
    }
    var weekArray = weeKList.sort()
    var weekStr = ''
    for (var i = 0; i < weekArray.length / 2; i++) {
      weekStr = weekStr + weekArray[i * 2] + '-' + weekArray[i * 2 + 1] + ','
    }
    weekStr = weekStr.substring(0, weekStr.length - 1)

    this.trend();
    this.analysis();
    this.onGetData();
    var that = this
    $('.at-datess>span').click(function (e) {

      $(this).addClass('activee').siblings().removeClass('activee')
      $('.at-select .ant-tag-checkable:nth-child(1)').addClass('ant-tag-checkable-checked')
      $('.at-select .ant-tag-checkable:nth-child(2)').removeClass('ant-tag-checkable-checked')
      $('.at-select .ant-tag-checkable:nth-child(3)').removeClass('ant-tag-checkable-checked')
      if (e.target.innerHTML === '境内') {

        that.setState({
          where: "jinNei"
        })
        u.dataStatistics({
          aggsField: 'addTime',
          aggsType: 'range',
          isNeedUserKey: true,
          ranges: timeStr
        }, data => {

          let arryAll = []
          for (var i = 0; i < data.aggs.length; i++) {
            arryAll.push(data.aggs[i].count)
          }
          today(arryAll)
          var sum = 0
          for (var i = 0; i < arryAll.length; i++) {
            sum = sum + arryAll[i]
          }
          that.setState({
            innerDate: arryAll,
            count: sum
          })
        })
      } else {
        that.setState({
          where: "jinWai"
        })
        $('.at-select .ant-tag-checkable:nth-child(1)').addClass('ant-tag-checkable-checked')
        $('.at-select .ant-tag-checkable:nth-child(2)').removeClass('ant-tag-checkable-checked')
        $('.at-select .ant-tag-checkable:nth-child(3)').removeClass('ant-tag-checkable-checked')
        u.instragramTime({
          aggsField: 'addTime',
          aggsType: 'range',
          isNeedUserKey: true,
          ranges: timeStr
        }, data => {

          let timeArray = []
          for (var i = 0; i < data.data.length; i++) {
            timeArray.push(data.data[i].count)
          }
          // console.log()
          today(timeArray)
          var sum = 0
          for (var i = 0; i < timeArray.length; i++) {
            sum = sum + timeArray[i]
          }

          that.setState({
            innerDate: timeArray,
            count: sum
          })

        })
      }
    })

    function today(arr) {
      let mediaTrend = echarts.init(window.document.getElementById('trend'));
      mediaTrend.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '0',
          right: '10%',
          top: '3%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [
          {

            type: 'category',
            data: ['2点', '4点', '6点', '8点', '10点', '12点', '14点', '16点', '18点', '20点', '22点', '24点'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#a1a5b5"
            },
            axisLine: {
              lineStyle: {
                color: "#a1a5b5"
              }
            },


          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#a1a5b5"
            },
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
              }
            }
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#566afe' },
                    { offset: 1, color: '#518bff' }
                  ]
                )
              },
            },
            barWidth: '20%',
            barCategoryGap: '10px',
            data: arr
          }
        ]
      });
    }

    $('.at-select>.ant-tag').click(function (e) {
      $(this).addClass('ant-tag-checkable-checked').siblings().removeClass('ant-tag-checkable-checked')

      if (e.target.innerHTML === '今日') {
        {
          if (that.state.where === 'jinNei') {
            u.dataStatistics({
              aggsField: 'addTime',
              aggsType: 'range',
              isNeedUserKey: true,
              ranges: timeStr
            }, data => {
              let arryAll = []
              for (var i = 0; i < data.aggs.length; i++) {
                arryAll.push(data.aggs[i].count)
              }
              today(arryAll)
              // that.setState({
              //   innerDate: arryAll
              // })
            })
          } else {
            u.instragramTime({
              aggsField: 'addTime',
              aggsType: 'range',
              isNeedUserKey: true,
              ranges: timeStr
            }, data => {
              let arryAll = []
              for (var i = 0; i < data.data.length; i++) {
                arryAll.push(data.data[i].count)
              }
              today(arryAll)
            })
          }
        }
      }



      if (e.target.innerHTML === '本周') {
        {
          if (that.state.where === 'jinNei') {
            u.dataStatistics({
              aggsField: 'addTime',
              aggsType: 'range',
              isNeedUserKey: true,
              ranges: dayStr
            }, data => {
              let arryAll = []
              for (var i = 0; i < data.aggs.length; i++) {
                arryAll.push(data.aggs[i].count)
              }
              // that.setState({
              //   innerDate: arryAll
              // })
              fnWeek(arryAll)
            })
          } else {
            u.instragramTime({
              aggsField: 'addTime',
              aggsType: 'range',
              isNeedUserKey: true,
              ranges: dayStr
            }, data => {
              let timeArray = []
              for (var i = 0; i < data.data.length; i++) {
                timeArray.push(data.data[i].count)
              }
              // that.setState({
              //   innerDate: timeArray
              // })
              fnWeek(timeArray)
            })
          }
        }
      }

      function fnWeek(arryAll) {
        let mediaTrend = echarts.init(window.document.getElementById('trend'));
        mediaTrend.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '0',
            right: '10%',
            top: '3%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: [
            {

              type: 'category',
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
              axisTick: {
                show: false
              },
              axisLabel: {
                color: "#a1a5b5"
              },
              axisLine: {
                lineStyle: {
                  color: "#a1a5b5"
                }
              },


            }
          ],
          yAxis: [
            {
              type: 'value',
              axisTick: {
                show: false
              },
              axisLabel: {
                color: "#a1a5b5"
              },
              axisLine: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  type: "dashed",
                }
              }
            }
          ],
          series: [
            {
              name: '数量',
              type: 'bar',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#566afe' },
                      { offset: 1, color: '#518bff' }
                    ]
                  )
                },
              },
              barWidth: '20%',
              barCategoryGap: '10px',
              data: arryAll
            }
          ]
        });
      }

      if (e.target.innerHTML === '历时四周') {
        {
          if (that.state.where === 'jinNei') {
            u.dataStatistics({
              aggsField: 'addTime',
              aggsType: 'range',
              isNeedUserKey: true,
              ranges: weekStr
            }, data => {
              let arryAll = []
              for (var i = 0; i < data.aggs.length; i++) {
                arryAll.push(data.aggs[i].count)
              }
              shisWeek(arryAll)
            })
          } else {
            u.instragramTime({
              aggsField: 'addTime',
              aggsType: 'range',
              isNeedUserKey: true,
              ranges: weekStr
            }, data => {
              let timeArray = []
              for (var i = 0; i < data.data.length; i++) {
                timeArray.push(data.data[i].count)
              }
              shisWeek(timeArray)
            })
          }
        };
      }

      function shisWeek(innerDate) {
        let mediaTrend = echarts.init(window.document.getElementById('trend'));
        mediaTrend.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            }
          },
          grid: {
            left: '0',
            right: '10%',
            top: '3%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {

              type: 'category',
              data: ['第一周', '第二周', '第三周', '第四周'],
              axisTick: {
                show: false
              },
              axisLabel: {
                color: "#a1a5b5"
              },
              axisLine: {
                lineStyle: {
                  color: "#a1a5b5"
                }
              },


            }
          ],
          yAxis: [
            {
              type: 'value',
              axisTick: {
                show: false
              },
              axisLabel: {
                color: "#a1a5b5"
              },
              axisLine: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  type: "dashed",
                }
              }
            }
          ],
          series: [
            {
              name: '数量',
              type: 'line',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#566afe' },
                      { offset: 1, color: '#518bff' }
                    ]
                  )
                },
              },
              barWidth: '20%',
              barCategoryGap: '10px',
              data: innerDate
            }
          ]
        });
      }

    })
  }

  onGetData() {
    u.read(data => {
      this.setState({
        titleList: data
      }, () => {
        // this.onDetail()
      })
    })
  }

  // 首页信息列表跳转
  handle(id, keyWord, content) {

    localStorage.setItem('content', content);
    const w = window.open('about:blank');
    w.location.href = u.testurl + '/journa?' + id + '?' + keyWord
  }

  setKey(key, keysub) {
    sessionStorage.setItem('basickeyword', key)
    keysub ? sessionStorage.setItem('basickeysub', keysub) : sessionStorage.setItem('basickeysub', '')
  }
  onChangeDate(value, dateString) {
  }

  onOkDate(value) {
  }

  onSimple() {
    u.simplee({
      size: 5,
      sortField: 'addTime'
    }, data => {
      if (data.data.data) {

        this.setState({
          yuJingList: data.data.data
        })
       
      }
    })
  }

  onGoYuJing(id, content, goKeyWord) {
    localStorage.setItem('content', content);
    const w = window.open('about:blank');
    w.location.href = u.testurl + '/journa?' + id + '?' + goKeyWord
  }
  render() {
    const { selectedTags } = this.state;
    return (
      <div id='index_father'>
        <div className='index-top'>
          <div className='index-top-left'>
            <div className='index-top-left-son'>今日</div>
            <ul className="data-ul">
              {
                this.state.arrayList.map((item, index) => {
                  return (
                    <li key={index}>
                      <div className='index-top-list'>
                        <img src={item.url} style={{ width: '26px', height: "26px", marginRight: "15%" }} alt="" />
                        <div className="ul-right">
                          <h3>{item.count}<span>/{item.toadycount}</span></h3>
                          <span>{item.title}</span>
                        </div>
                        <span></span>
                      </div>

                    </li>
                  )
                })
              }
            </ul>
          </div>

          <div className="analysis-content">
            <div className="a-trend">
              <div className="at-title">
                <div className="at-datess">
                  <span className='activee'>境内</span>
                  <span className='jingWai'>境外</span>
                </div>
                <div className="at-time">

                  {/* <RangePicker
                    className='timeStyle'
                    showTime={{ format: 'HH:mm' }}
                    format="YYYY-MM-DD HH:mm"
                    placeholder={['Start Time', 'End Time']}
                    onChange={this.onChangeDate}
                    onOk={this.onOkDate}
                  /> */}
                </div>
              </div>

              <div className='trend'>
                <div className="at-dataa">
                  <div className="at-dataalist"> <span>监测趋势</span>
                    <span>今日总量:<span style={{ color: "#36c81e", fontSize: 20, }}>{this.state.count}</span></span></div>

                  <div className="at-select">
                    {tagsFromServer.map(tag => (
                      <CheckableTag key={tag} checked={selectedTags.indexOf(tag) > -1} onChange={checked => this.handleChange(tag, checked)}>
                        {tag}
                      </CheckableTag>
                    ))}
                  </div>
                </div>
                <div id="trend">
                  <div className="example">
                    {/* <Spin /> */}
                  </div>
                </div>
              </div>
              <div className='bbxx'>
                <h3 style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span>预警通知</span>
                  <span
                    onClick={() => {
                      this.setKey('4', 'sub1')
                      window.location.hash = '/sample'
                    }}
                  ><img src={require('../../static/image/gd.png')} alt='' /></span>
                </h3>
                <ul>
                  {
                    this.state.yuJingList.length > 0 ?
                      this.state.yuJingList.map((item, index) => {
                        return (
                          <li key={index} onClick={() => { this.onGoYuJing(item.id, item.content, item.keyWord) }}>
                            <span className="widthStyle">{index + 1}</span>
                            <span className="widthStyle2" dangerouslySetInnerHTML={{ __html: item.title.replace(/<br \/>/g, '') }}></span>
                          </li>
                        )
                      }) : <li>暂无数据</li>
                  }
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div className='conter'>
          <div className='conter_bottom'>
            {
              this.state.list1.length > 0 ?
                this.state.list1.map((item, index) => {
                  return (
                    item.value.data.length !== 0 ?
                    <div className='conter_bottom_son' key={index}>
                      <div className='top_one'>
                        <div>{item.name}</div>
                        <div
                          onClick={() => {
                            sessionStorage.setItem('basickeyword', '2')
                            sessionStorage.setItem('basickeysub', 'sub1')
                            window.location.reload()
                            console.log(123123123)
                          }}
                        ><Link to={'/searchCont/2?' + item.name}>
                        <img src={require('../../static/image/gd.png')} alt="" /></Link>
                        </div>
                      </div>
                      <ul>
                        {item.value.data.slice(0, 4).map((el, index) => {
                          return (
                            <li key={index} onClick={() => { this.handle(el.id, el.keyWord) }} style={{ cursor: 'pointer' }}>
                              <div>
                                <h3 dangerouslySetInnerHTML={{ __html: el.title.replace(/<br \/>/g, '') }}></h3>
                                <p dangerouslySetInnerHTML={{ __html: el.content.replace(/<br \/>/g, '') }}></p>
                              </div>
                              <div className='right_div'>{el.poDay}</div>
                            </li>
                          )
                        })}
                      </ul>
                    </div>: ''
                  )
                })
                : <div className='conter_bottom_son'>
                  <div className='top_one'>
                    <span></span>暂无数据<span><img src={require('../../static/image/gd.png')} alt="" /></span>
                  </div>
                  <ul>
                    <li>暂无数据</li>
                  </ul>
                </div>
            }
          </div>
        </div>
      </div>
    )
  }
}

export default Index